<template>
  <!-- 业务组件配置管理 -->
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar :add-active="addActive" :del-active="delActive" :cancel-active="cancelActive" :has-edit="false" :has-del="false" :has-save="false" :has-add="true" :save-active="saveActive" @add="add" @cancel="cancel" @del="del" />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="common-search-item">
          <div class="label">诊断项名称:</div>
          <div class="input">
            <el-input v-model="diagnosisItemName" placeholder="请输入诊断项名称" clearable @input="search()" />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <!-- 业务组件展示表格 -->
      <div class="zh-table-view">
        <el-table :data="tableData" style="width: 100%" @row-click="handleEdit" height="100%">
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="diagnosisItemName" label="诊断项名称" />
          <el-table-column prop="plantVarietyName" label="关联品种" />
          <el-table-column prop="mainFeaturesFlag" label="是否是主要判断特征">
            <template slot-scope="scope">
              {{ scope.row.mainFeaturesFlag ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="edit">修改</el-button>
              <el-button size="mini" type="warning" @click="dellineallmes(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
      </div>
    </template>

    <template v-slot:dialog>
      <!-- 新增业务组件的弹框 -->
      <el-dialog :title="titleText + '诊断项'" class="formData" :visible.sync="dialogFormVisible" width="40%" :before-close="() => { dialogFormVisible = false }">
        <el-form ref="formData" label-position="left" :model="formData" :rules="rules" class="el-form">
          <el-form-item label="诊断项名称	" prop="diagnosisItemName" class="w100p">
            <el-input v-model="formData.diagnosisItemName" clearable placeholder="请输入诊断项名称" />
          </el-form-item>
          <el-form-item label="关联品种" prop="plantVarietyId" class="w100p">
            <el-select class="w100p" v-model="formData.plantVarietyId" filterable placeholder="请选择养殖品种" @change="handleChangePlantVariety">
              <el-option v-for="item, index in varietyList" :key="index" :label="item.plantVarietyName" :value="item.plantVarietyId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主要判断特征" prop="mainFeaturesFlag" class="w100p">
            <el-select class="w100p" filterable clearable v-model="formData.mainFeaturesFlag">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel('formData')">取 消</el-button>
          <el-button type="primary" @click="savemes">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from '@/components/ActionBar/index';
import { mymixin } from '@/utils/mixins';
import SearchBox from '@/components/SearchBox';
import BaseMainSlot from '@/components/BaseMainSlot/newBaseMainSlot.vue';
import zhreq from '@/api/basic-info-manage/diagnosticItem-management';
import categoryzhreq from '@/api/basic-info-manage/category-management'
import varietyManagement from '@/api/basic-info-manage/breed-varieties-management';
import Pagination from '@/components/Pagination';
// import { getTitleList } from "@/components/getnameurl";
export default {
  components: { ActionBar, Pagination, BaseMainSlot, SearchBox },
  mixins: [mymixin],
  data() {
    return {
      isshowuploadpic: false,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      totalSize: 0,
      diagnosisItemName: '',
      formData: {},
      varietyList: [],
      unitTypeList:[],
      rules: {
        diagnosisItemName: [{ required: true, message: '请输入', trigger: 'change' }],
        plantVarietyId: [{ required: true, message: '请选择', trigger: 'change' }],
        mainFeaturesFlag: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    this.gettabledataList();
  },
  methods: {
    // 获取下拉框信息
    async initData() {
      let { data: varietyList } = await varietyManagement.queryByCondition({ farming: 'FISH' });
      this.varietyList = varietyList;
      const { data: res } = await categoryzhreq.queryByCondition({ farming: 'FISH' });
      this.unitTypeList = res;
    },
    handleChangePlantVariety(id) {
      let rut = this.varietyList.find((e) => {
        return e.plantVarietyId == id;
      });
      let tworut = this.unitTypeList.find((item)=>{
        return item.plantTypeNo == rut.plantTypeNo
      })
      console.log(rut);
      console.log(tworut);
      this.$set(this.formData, 'plantVarietyName', rut ? rut.plantVarietyName : '');
      this.$set(this.formData, 'plantTypeNo', rut ? tworut.plantTypeNo : '');
      this.$set(this.formData, 'plantTypeName', rut ? tworut.plantTypeName : '');
    },
    // 获取表格信息
    gettabledataList() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          diagnosisItemName: this.diagnosisItemName
        }
      };
      zhreq
        .queryPageByCondition(params)
        .then((res) => {
          let resData = res.data || {};
          if (res.code === 1) {
            this.tableData = resData.content || [];
            this.totalSize = resData.totalElements;
            this.resetActionBar();
          } else {
            this.$message.warning('获取表格失败');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索
    search() {
      this.currentPage = 1;
      this.gettabledataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.gettabledataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.gettabledataList();
    },
    // 删除一个业务组件
    dellineallmes(i, e) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          zhreq.delList([e.diagnosisItemId]).then((res) => {
            if (res.code === 1) {
              this.$message.success('删除成功！');
              this.gettabledataList();
            } else {
              this.$message.success('删除失败！');
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    handleEdit(row) {
      if (row) {
        this.formData = JSON.parse(JSON.stringify(row));
      }
    },
    // 保存要添加的业务的组件信息
    savemes() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.handleChangePlantVariety(this.formData.plantVarietyId);
          if (this.nowChanceStau === 'edit') {
            let param = {
              ...this.formData
            };
            zhreq.edit(param).then((response) => {
              let mes = response;
              if (mes.code === 1) {
                this.$message.success('修改成功！');
                this.gettabledataList();
                this.cancel('formData');
              } else {
                this.$message.warning(mes.msg || '操作失败！');
              }
            });
          } else if (this.nowChanceStau === 'add') {
            let param = {
              ...this.formData
            };
            zhreq.add(param).then((response) => {
              let mes = response;
              if (mes.code === 1) {
                this.$message.success('添加成功！');
                this.gettabledataList();
                this.cancel('formData');
              } else {
                this.$message.warning(mes.msg || '操作失败！');
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
</style>